import React,{ useState, useEffect } from 'react';
import '../css/SearchBar.css'
import {useNavigate} from 'react-router-dom'
import axios from '../../../../axios/axios';
const SearchBar = () => {
    let navigate = useNavigate()
    let [total,setTotal] = useState(0)
    let getCartList = ()=>{
      axios.get('http://localhost:3000/fan/shop_cart').then(res=>{
        console.log(res.data.data);
       
        let sum = res.data.data.length
        setTotal(sum)
       })
    }
    useEffect(()=>{
      getCartList()
    },[])
    return (
        <div className="search-bar">
        <div className="logo-container">
            <div className="logo">LOGO</div>
            <span className="logo-text">生鲜电商</span>
        </div>
        <div className="search-container">
            <input type="text" placeholder="请输入商品名称" className="search-input" />
            <button className="search-button">搜索</button>
        </div>
        <div className="cart-container"
        onClick={()=>{
            navigate('/fan/cart')
        }}
        >
            <span className="cart-icon">🛒我的购物车</span>
            <span className="cart-count">({total})</span>
        </div>
    </div>
    );
};

export default SearchBar;